<!--
- File:    积分商城
-->
<template>
  <div class="Web_Box">
    <mt-swipe :auto="4000" class="banner swiper-container" style="height: 8rem">
      <mt-swipe-item class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
        <div class="swiper-slide" @click="gotoUrl(item.adv_pic_url)">
          <img :src="$config.imgsite + $config.adImgSrc + item.adv_pic + '_w640h320'" alt=""/>
        </div>
      </mt-swipe-item>
    </mt-swipe>
    <div class="integrat_top">
      <ul class="f-cb">
        <li class="bor-r-eee">积分 <span class="cr_3ebb6e">{{integralNum}} </span></li>
        <li><a @click="gotoExchangedList">兑换记录
          <span class="num" v-show="noticeCount != 0">{{noticeCount | noticeMaxLimit}}</span>
        </a></li>
      </ul>
    </div>
    <div class="screen_box">
      <ul class="screen_left f-cb" style="width: 13rem">
        <li :class="{'on': !saleOrder && !priceOrder}" style="width: 25%" @click="orderByDefaul">综合排序</li>
        <li @click="gotoClassify" style="width: 25%">分类</li>
        <li :class="{'on': priceOrder != null}" style="width: 25%" @click="orderByPrice">价格</li>
        <li :class="{'on': saleOrder != null}" style="width: 25%" @click="orderBySale">销量</li>
      </ul>
      <div class="screen" style="width: 3rem" @click="switchTagModalShow(true)">
        <i class="iconfont icon-shaixuan"></i><span>筛选</span>
      </div>
      <!--<div class="screen" style="width: 3rem" @click="switchClassifyModalShow(true)"><i class="iconfont icon-baike"></i><span>分类</span>-->
      <!--</div>-->
    </div>
    <div class="bg_fff pt20 mt20" v-show="goods.allLoaded && goods.data.length > 0">
      <div class="CommodityClassification">
        <div class="con"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="false"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false">
          <ul id="content">
            <li v-for="item in goods.data" @click="gotoGoodsDetail(item.goods_commonid)">
              <div class="pic"><img :src="$config.imgsite + $config.goodsImgSrc + storeId + '/' + item.goods_image + '_w200'" alt=""/>
              </div>
              <h3 class="slh2">{{item.goods_name}}</h3>
              <p class="Price"><span class="pl5">{{parseInt(item.goods_price)}}</span><span class="inte">积分</span></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--分类-->
    <transition name="slide-fade">
      <div class="screenblock" v-show="ClassifyModalShow">
        <!--买花分类-->
        <div v-if="goodsClassifyList">
          <div v-for="classify in goodsClassifyList.integral">
            <div class="s_title">
              <i class="iconfont icon-shuxian"></i><span :class="{'tag-on': classifySelected == classify.stc_id}" @click="switchSelectClassify(classify.stc_id)">{{classify.stc_name}}</span>
            </div>
            <div class="screen_b">
              <ul class="f-cb">
                <li v-for="classifySon in classify.son" :class="{'tag-on': classifySelected == classifySon.stc_id}" @click="switchSelectClassify(classifySon.stc_id)">{{classifySon.stc_name}}</li>
              </ul>
            </div>
          </div>
          <div style="margin: 0 auto; width: 100%; margin-top: 5rem; text-align: center" v-if="goodsClassifyList.buy.length == 0">
            当前没有分类~
          </div>
        </div>
        <div class="screenblock_btn">
          <a href="javascript:void(0)" class="bg_221814" @click="cancleSelectClassify">取消</a><a href="javascript:void(0)" class=" bg_3dbb6e" @click="confirmSelectClassify">确定</a>
        </div>
      </div>
    </transition>
    <!--分类 end-->
    <!--筛选-->
    <transition name="slide-fade">
      <div class="screenblock" v-show="tagModalShow">
        <h1 style="text-align: center; background: #7dd594; font-size: 17px; line-height: 35px; font-weight: bolder; color: #fff">分类</h1>
        <!--买花分类-->
        <div v-if="goodsClassifyList">
          <div v-for="classify in goodsClassifyList.integral">
            <div class="s_title">
              <i class="iconfont icon-shuxian"></i><span :class="{'tag-on': classifySelected == classify.stc_id}" @click="switchSelectClassify(classify.stc_id)">{{classify.stc_name}}</span>
            </div>
            <div class="screen_b">
              <ul class="f-cb">
                <li v-for="classifySon in classify.son" :class="{'tag-on': classifySelected == classifySon.stc_id}" @click="switchSelectClassify(classifySon.stc_id)">{{classifySon.stc_name}}</li>
              </ul>
            </div>
          </div>
          <div style="margin: 0 auto; width: 100%; margin-top: 5rem; text-align: center" v-if="goodsClassifyList.buy.length == 0">
            当前没有分类~
          </div>
        </div>
        <h1 style="text-align: center; background: #7dd594; font-size: 17px; line-height: 35px; font-weight: bolder; color: #fff">筛选</h1>
        <div v-for="tagGroup in tagList">
          <div class="s_title"><i class="iconfont icon-shuxian"></i><span>{{tagGroup.tag_typename}}</span></div>
          <div class="screen_b">
            <ul class="f-cb">
              <li v-for="tag in tagGroup.data" :class="{'tag-on': tagIsSelected(tag.tag_id)}" @click="switchSelectTag(tag.tag_id)">{{tag.tag_name}}</li>
            </ul>
          </div>
        </div>
        <div class="screenblock_btn">
          <a href="javascript:void(0)" class="bg_221814" @click="cancleSelectTag">取消</a><a href="javascript:void(0)" class=" bg_3dbb6e" @click="confirmSelectTag">确定</a>
        </div>
      </div>
    </transition>
    <!--筛选 end-->
    <loading-more :allLoaded="goods.allLoaded" :show="goods.data.length > 0"></loading-more>
    <empty-data :show="goods.allLoaded && goods.data.length <= 0" style="margin-top: 5rem"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {Swipe, SwipeItem} from 'mint-ui'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({goodsClassifyList: 'goodsClassifyList', tagList: 'tagList'}),
      mapRules({once: ['goodsClassifyList', 'tagList']})
    ],
    data() {
      return {
        storeId: this.$route.params.id || this.$config.storeId,
        integralNum: '',
        goodsClass: null, // 商品类别
        bannerList: [],
        priceOrder: this.$route.query.priceOrder || null, // 价格排序
        saleOrder: this.$route.query.saleOrder || null, // 销量排序
        tagSelectedList: this.$route.query.tags ? this.$route.query.tags.split(',') : [], // 筛选
        classifySelected: this.$route.query.classify || null, // 分类
        tagModalShow: false, // 是否弹出筛选页面
        ClassifyModalShow: false, // 是否弹出分类页
        goods: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        countList: {payed_order: 0, ship_order: 0, unpay_order: 0, eval_order: 0}
      }
    },
    components: {
      'mtSwipe': Swipe,
      'mtSwipeItem': SwipeItem
    },
    created() {
      // this.$native.weixinShare(window.location.href)
      this.getCountList()
      this.getIntegralNum()
      this.getBannerList()
      this.getGoodsByClassify(this.goods.page, this.goods.pageSize)
//      this.getClassifyList()
//      this.getGoodsList(this.goods.page, this.goods.pageSize)
    },
    watch: {
      $route () {
        this.classifySelected = this.$route.query.classify || null
        this.priceOrder = this.$route.query.priceOrder || null // 价格排序
        this.saleOrder = this.$route.query.saleOrder || null // 销量排序
        // this.tagSelectedList = [] // 筛选
        this.initGoodsList()
      }
    },
    computed: {
      // 提醒数
      noticeCount () {
        return parseInt(this.countList.payed_order) + parseInt(this.countList.unpay_order) + parseInt(this.countList.ship_order)
      }
    },
    methods: {
      gotoClassify() {
        this.$router.push({name: 'classify-integral'})
      },
      gotoUrl(url) {
        if (url != '') {
          window.location.href = url // eslint-disable-line
        }
      },
      gotoExchangedList() {
        this.$router.push({name: 'integral-exchanged'})
      },
      gotoGoodsDetail(goodsCommonid) {
        this.$router.push({
          name: 'goods-detail',
          params: {id: goodsCommonid},
          query: {storeId: this.$config.storeId, buyType: this.$dictionary.buyType.integral}
        })
      },
//      setGoodsClass(classId) {
//        this.goodsClass = classId
//        this.goods = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
//        this.getGoodsList(this.goods.page, this.goods.pageSize)
//      },
      getCountList() {
        this.$request.getCountList('4').then(data => {
          this.countList = data
        })
      },
      getIntegralNum() {
        this.$request.getIntegralNum().then(data => {
          this.integralNum = data
        })
      },
      getBannerList() {
        this.$request.getIntagralMallBannerList().then(data => {
          this.bannerList = data
        })
      },
      getGoodsByClassify(page, pageSize) {
        this.goods.loading = true
        this.$request.getGoodsByClassify({
          gc_id: this.$dictionary.buyType.integral,
          page: page,
          pageSize: pageSize,
          price_order: this.priceOrder,
          sale_order: this.saleOrder,
          store_id: this.storeId,
          tag_arr: this.tagSelectedList.join(','),
          stc_id: this.classifySelected
        }).then(data => {
          if (data.length < this.goods.pageSize) {
            this.goods.allLoaded = true
          }
          this.goods.data = [...this.goods.data, ...data]
        }).finally(() => {
          this.goods.requested = true
          this.goods.loading = false
        })
      },
//      getGoodsList(page, pageSize) {
//        this.goods.loading = true
//        this.$request.getGoodsByClassify({
//          gc_id: this.$dictionary.buyType.integral,
//          cid: this.goodsClass,
//          page: page,
//          pageSize: pageSize,
//          store_id: this.$config.storeId
//        }).then(data => {
//          if (data.length < this.goods.pageSize) {
//            this.goods.allLoaded = true
//          }
//          this.goods.data = [...this.goods.data, ...data]
//        }).finally(() => {
//          this.goods.requested = true
//          this.goods.loading = false
//        })
//      },
      loadMore() {
        if (this.goods.loading || this.goods.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getGoodsByClassify(++this.goods.page, this.goods.pageSize)
        }, 500)
      },
      initGoodsList() {
        this.goods = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getGoodsByClassify(this.goods.page, this.goods.pageSize)
      },
      orderByDefaul() {
        this.priceOrder = null
        this.saleOrder = null
        this.initGoodsList()
      },
      orderByPrice() {
        this.priceOrder = 1
        this.saleOrder = null
        this.initGoodsList()
      },
      orderBySale() {
        this.saleOrder = 1
        this.priceOrder = null
        this.initGoodsList()
      },
      switchTagModalShow(boolValue) {
        if (boolValue) {
          this.$utils.addBodyFix() // 显示模态框，防止滚动模态框里的div时body也滚动
        } else {
          this.$utils.removeBodyFix()
        }
        this.tagModalShow = boolValue
      },
      switchClassifyModalShow(boolValue) {
        if (boolValue) {
          this.$utils.addBodyFix() // 显示模态框，防止滚动模态框里的div时body也滚动
        } else {
          this.$utils.removeBodyFix()
        }
        this.ClassifyModalShow = boolValue
      },
      cancleSelectClassify() {
        this.classifySelected = null
        this.switchClassifyModalShow(false)
        this.initGoodsList()
      },
      confirmSelectClassify() {
        this.switchClassifyModalShow(false)
        // this.initGoodsList()
        this.$router.replace({name: 'integral-mall', query: {classify: this.classifySelected}})
      },
      switchSelectClassify(classifyId) {
        if (this.classifySelected == classifyId) {
          this.classifySelected = null
        } else {
          this.classifySelected = classifyId
        }
      },
      cancleSelectTag() {
        this.classifySelected = null
        this.tagSelectedList = []
        this.switchTagModalShow(false)
        this.initGoodsList()
      },
      confirmSelectTag() {
        this.switchTagModalShow(false)
        this.initGoodsList()
      },
      switchSelectTag(tagId) {
        let index = this.tagSelectedList.indexOf(tagId)
        if (index == -1) {
          this.tagSelectedList.push(tagId)
        } else {
          this.tagSelectedList.splice(index, 1)
        }
      },
      tagIsSelected(tagId) {
        if (this.tagSelectedList.indexOf(tagId) != -1) {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>

<style>
  .tag-on {
    background-color: #3dbb6e !important;
    color: #fff !important;
  }
  .integrat_top li {
    position: relative;
  }
  .integrat_top li .num {
    position: absolute;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 16px;
    background: #fff;
    border: 1px #f00 solid;
    color: #f00;
    top: -5px;
    right:1.8rem;
    font-size: 10px;
    border-radius: 50%;
  }
</style>